<template>
  <v-app id="inspire">
    <v-app-bar
      app
      color="white"
      flat
      hide-on-scroll
    >
      <v-btn
        icon
        @click.native="jumpToHome"
      >
        <v-avatar>
          <v-img src='@/assets/logo.png' alt=''/>
        </v-avatar>
      </v-btn>
      <v-tabs
        v-if='isLogin'
        centered
        v-model="active_tab"
        class="ml-n9"
        color="grey darken-1"
        slider-color="secondary"
      >
        <v-tab
          v-for="(link,index) in links"
          :key="link.path"
          @click='changeBody(link.path,index)'
        >
          {{ link.name }}
        </v-tab>
        <v-tab
          v-if='isAdmin'
          @click="changeBody('/admin')"
        >
          管理员控制台
        </v-tab>
      </v-tabs>

<!--      头像组件-->
      <v-row justify="center" v-if='isLogin'>
        <v-menu
          bottom
          min-width="200px"
          rounded
          offset-y
        >
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          x-large
          v-on="on"
        >
          <v-avatar
            color="brown"
            size="32"
          >
            <v-img
              :src=avatarSrc>
            </v-img>
          </v-avatar>
        </v-btn>
      </template>
      <v-card>
        <v-list-item-content class="justify-center">
          <div class="mx-auto text-center">
            <v-avatar
              color="brown"
            >
              <v-img
                :src=avatarSrc>
              </v-img>
            </v-avatar>
            <h3>@{{this.userInfo.name}}</h3>
            <span class="text-caption mt-1">
              ID: {{this.userInfo.id}}
            </span>
            <p class="text-caption mt-1">
              {{this.userInfo.role}}
            </p>
            <v-divider class="my-3"></v-divider>
            <v-btn
              depressed
              rounded
              text
            >
              个人资料
            </v-btn>
            <v-divider class="my-3"></v-divider>
            <v-btn
              depressed
              rounded
              text
              @click='loginOut'
            >
              退出登录
            </v-btn>
          </div>
        </v-list-item-content>
      </v-card>
          </v-menu>
        </v-row>
    </v-app-bar>

    <v-main class="grey lighten-3">
      <v-fade-transition mode="out-in" :appear="true" :duration="200">
        <router-view :user='userInfo' :isLogin='isLogin'/>
      </v-fade-transition>
    </v-main>
    <v-footer
      color='pink lighten-3'
      padless
    >
      <v-card
        flat
        tile
        class="secondary white--text text-center"
      >
        <v-card-text>
          <v-btn
            v-for="icon in icons"
            :key="icon"
            class="mx-4 white--text"
            icon
          >
            <v-icon size="24px">
              {{ icon }}
            </v-icon>
          </v-btn>
        </v-card-text>

        <v-card-text class="white--text pt-0">
          1、用户管理：不用用户类型的权限设置，及用户管理，也可以支持为整个用户组设置权限。 2、图片素材库管理和浏览：图片素材的增删改查等，也可支持其他素材包的导入。可按类别、标签、属性等各类进行图片浏览，也可进行多种排列方式查看图片。 3、检索功能：可按名称、类别进行模糊检索，系统也可自动获取图片的颜色、形状，照片的拍摄时间、作者、相机型号，音视频的时长、码率等信息辅助搜索筛选。 4、标签管理：系统中所有标签汇总，可以创建标签分组，了解标签数据情况。点击标签即可快速搜索相关文件。标签也可以设置权限，能够限制只有管理员创建标签或者成员也可以创建标签。可为图片自定义添加标签、或批量添加标签、评分、描述等信息 5、日志管理：系统中所有的操作动态都会被记录，每个成员根据自己的权限，只能查看与自己有关文件的操作动态，管理员可以查看到全站的操作动态。6、图像增强功能： 通过图像去雾、图像对比度增强、拉伸图像、恢复等方法，解决图像图像偏小、不清晰、被拉伸、过暗或过亮等问题。
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          Copyright © 2022.3 - {{ new Date().getFullYear() }}.{{ new Date().getMonth()+1 }} WeiningLai. All rights reserved. Design for graduation project
        </v-card-text>
      </v-card>
    </v-footer>
  </v-app>
</template>

<script>
  import store from '@/store'
  export default {
    name: 'Start',
    data() {
      return {
        active_tab: window.sessionStorage.getItem('active_tab'),
        avatarSrc: 'http://mytutu.oss-cn-beijing.aliyuncs.com/avatar.jpg',
        links: [
          { name: '主页',path: '/intro' },
          { name: '相册',path: '/album' },
          { name: '团队',path: '/group' }
        ],
        icons: [
          'mdi-qqchat',
          'mdi-wechat',
          'mdi-email',
          'mdi-cellphone'
        ]
      }
    },
    created() {
    },
    watch: {
      active_tab: {
        handler(val) {
          window.sessionStorage.setItem('active_tab',val)
        }
      },
      'store.getters.getCurrentUser': {
        handler(val) {
          console.log(val)
        },
        deep: true
      }
    },
    computed: {
      isLogin: {
        get() {
          console.log('isLogin ',store.getters.getCurrentUser)
          return store.getters.getCurrentUser !== '{}';
        }
      },
      isAdmin: {
        get() {
          if (this.isLogin) {
            return store.getters.getCurrentUser.role === '1001'
          }
          return false
        }
      },
      userInfo: {
        get: () => {
          const roleMap = {
            1001: '管理员',
            1002: '组织者',
            1003: '普通用户'
          }
          return {
            id: store.getters.getCurrentUser.userId || '',
            name: store.getters.getCurrentUser.user || '',
            role: roleMap[store.getters.getCurrentUser.role || '1001'] ,
            email: store.getters.getCurrentUser.email || ''
          }
        }
      }
    },
    methods: {
      jumpToHome() {
        if (this.$route.path !== '/intro') {
          this.$router.replace('/intro')
        }
      },
      changeBody(path) {
        if (path !== this.$route.path) {
          this.$router.push(path)
        }
      },
      loginOut() {
        store.commit('SET_CURRENT_USER',null)
        // window.sessionStorage.setItem('currentUser','{}')
        this.$router.replace('login')
      }
    }
  }
</script>

<style scoped>

</style>
